<template>
    <ToDoHeader @addEvent="handleAdd"></ToDoHeader>
    <ToDoMain :list="showList" @delEvent="list.splice(index, 1)"></ToDoMain>
    <ToDoFooter @changeTypeEvent="value => type = value"
    :type="type" :activeCount="activeCount"></ToDoFooter>
</template>
<script setup>
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
import ToDoFooter from './components/ToDoFooter.vue'
import { ref, computed } from 'vue'
const list = ref([
    { id: 1, name: '晨练', done: false},
    { id: 2, name: '练书法', done: true}
])
// type可以变成：all/active/completed
const type = ref('all')
// 跟type的取值和list里面的数据有关
const showList = computed(() => {
    if(type.value === 'all') {
        return list.value
    }
    if(type.value === 'active') {
        // 数组过滤，过滤已完成的
        return list.value.filter(item => !item.done)
    }
    if(type.value === 'completed') {
        return list.value.filter(item => item.done)
    }
})
// 计算属性：根据当前的list计算当前的最大id+1
const nextId = computed(() => {
    // 代码涉及的响应式数据变化了，会重新计算结果
    return Math.max(...list.value.map(item => item.id)) + 1
})
// 计算属性：根据当前的list计算未完成的任务数量
const activeCount = computed(() => {
    // 过滤出未完成的todo到新的数组，数量就是新数组的长度
    return list.value.filter(item => !item.done).length
})
/**
 * 添加一个任务
 * @param value 任务名字
 */
const handleAdd = value => {
    // 判断是否重复
    if(list.value.findIndex(item => item.name === value) >= 0) {
        alert('任务名重复了')
        return
    }
    // 添加
    list.value.push({id: nextId.value, name: value, done: false})
}
</script>
<style scoped>
    
</style>